<!--
 * @description  : 证件-实地核查列表
 * @descriptionDetail: 证件-实地核查列表
 * @copyright    : 浙江烟草
 * @author       : dw
 * @create       : 2022-12-09 14:15:18
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :isWhite="false" backText="返回" :title="navTitle">
      <view class="nav-right-icon" @click="selectOrg">
        <u-icon color="#FFF" name="list" size="38"></u-icon>
      </view>
    </theme-navbar>
    <!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="tab-hd" :style="{'top': isHideNav ? 0 : '44px'}">
      <u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" @change="tabChange"></u-tabs>
      <view style="background-color: #F3F4F5;height: 10px;"></view>
    </view>
    <view class="content">
      <me-table top="44px" :i="0" :index="0" :load-data="loadAuditData" :init-load="false" ref="mescrollItem0">
        <view class="u-flex" slot-scope="d">
          <check-item :check-info="d.data" :tabCurrent="tabCurrent"></check-item>
        </view>
      </me-table>
    </view>
    <u-popup v-model="orgShow" width="80%" mode="right">
      <view class="cearch_title">
        查询条件
      </view>
      <view class="title-content">
        <u-form :model="queryForm" :errorType="errorType" ref="uForm">
          <u-form-item label="流程名称" :label-position="labelPosition">
            <u-input placeholder="请输入流程名称" v-model="queryForm.processName" />
          </u-form-item>
          <u-form-item
            label="受理开始日期"
            :label-position="labelPosition"
            right-icon="arrow-right"
            prop="beginTime"
            ref="startChangeRef"
          >
            <u-input
              :disabled="true"
              placeholder="请选择日期"
              v-model="queryForm.beginTime"
              @click="clicDatekHandle('isShowStart')"
            />
          </u-form-item>
          <u-form-item
            label="受理结束日期"
            :label-position="labelPosition"
            right-icon="arrow-right"
            prop="endTime"
            ref="endChangeRef"
          >
            <u-input
              :disabled="true"
              placeholder="请选择日期"
              v-model="queryForm.endTime"
              @click="clicDatekHandle('isShowEnd')"
            />
          </u-form-item>
        </u-form>
      </view>
      <view class="submit-btns btn-other-cls">
        <u-button plain class="del" type="primary" @click="resetForm">
          重置
        </u-button>
        <u-button class="mit" type="primary" @click="selectChange">
          确定
        </u-button>
      </view>
    </u-popup>
    <u-calendar v-model="showTime" :max-date="maxDate" mode="date" @change="timeChange"></u-calendar>
  </view>
</template>

<script>
	import meTable from '@/components/me-table.vue';
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import checkItem from "./aduitListItem/checkItem.vue";
	import commonService from "@/service/common/common.service";
	const SYS_CERT_CODE = "901003"; // 证件系统编码
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			meTable,
			checkItem,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				user: this.$storage.get(this.$rp.common.USER),
				barStyle: {
					// 底部滑块的样式
					background: "#027AFF !important",
					marginBottom: "-5rpx",
					width: "60rpx",
					marginLeft: "-10rpx",
				},
				queryKey: {},
				activeShow: false,
				isShowSelect: false,
				selectIds: [], // 选中的id
				selectItems: [], // 选中的检查任务
				orgShow: false, // 筛选控制
				queryForm: {
					endTime: '',
					beginTime: '',
					processName: '',
				},
				labelPosition: 'top',
				errorType: ['border-bottom', 'message', ],
				labelWidth: '180',
				showTime: false,
				timeId: "",
				maxDate: '2099-12-31',
				tabCurrent: 0,
				tabList: [{
						name: "待核查",
						interface: "getMyBizTaskTodoPage",
					},
					{
						name: "已核查",
						interface: "getMyBizTaskDoneAllPage", // 新接口
					},
				],
				fContent: [{
					iconPath: require('@/static/sou.png'),
					selectedIconPath: require('@/static/sou.png'),
					text: '确定',
					active: false,
				}],
			};
		},
		onLoad() {},
		mounted() {
			this.setRightBtns();
		},
		methods: {
			// 设置右侧标题
			setRightBtns() {
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("筛选", () => {
					this.selectOrg();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.selectOrg();
				}
			},
			selectOrg() {
				this.orgShow = true;
			},
			selectChange() {
				this.orgShow = false;
				this.getMescroll(0).triggerDownScroll();
			},
			// 实地核查列表数据
			loadAuditData(page) {
				let params = {
					page: page.num,
					limit: page.size,
					defaultPageSize: page.size,
					sysCode: SYS_CERT_CODE,
					taskTitle: this.queryForm.processName,
					startTimeStart: this.queryForm.beginTime,
					startTimeEnd: this.queryForm.endTime,
					processDefKeys: "sitecheck",
				}
				return new Promise(resolve => {
					let fun = commonService[this.tabList[this.tabCurrent].interface];
					fun(params).then((res) => {
						if (res.success && res.data.length > 0) {
							let dataArr = res.data;
							resolve({
								data: dataArr,
								count: res.count,
							});
						} else {
							resolve({
								"data": [],
							});
						}
					}).catch((error) => {
						resolve({
							"data": [],
						});
					});
				});
			},
			clicDatekHandle(type) {
				this.timeId = type;
				this.showTime = true;
			},
			updateBackState(obj) {
				// 经营地址选择返回操作
				if (obj.queryInfo) {
					this.getMescroll(0).triggerDownScroll();
				}
			},
			resetForm() {
				this.queryForm = {
					endTime: '',
					beginTime: '',
					processName: '',
				};
				this.orgShow = false;
				this.getMescroll(0).triggerDownScroll();
			},
			timeChange(e) {
				this.showTime = false;
				if (this.timeId == 'isShowStart') {
					this.queryForm.beginTime = e.result;
				} else {
					this.queryForm.endTime = e.result;
				}
			},
			searchTime(e) {
				this.timeId = e;
				this.showTime = true;
			},
			tabChange(e) {
				this.tabCurrent = e;
				this.getMescroll(0).triggerDownScroll();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0;
	}

	.cert-tab-lay {
		background-color: #fff;
		position: fixed;
		/* #ifdef H5-DINGDING  */
		top: 0px;
		/* #endif */
		/* #ifndef H5-DINGDING  */
		top: 44px;
		/* #endif */
		z-index: 999;
		width: 100%;
	}

	.tabs-bottom {
		border-bottom: 8px solid #EFF3F9;
	}

	.active-bottom {
		position: fixed;
		width: 100%;
		height: 65px;
		line-height: 65px;
		bottom: 0px;
		background-color: #fff;
		border: 2px solid #EFF3F9;
		text-align: center;
	}

	.check-item {
		position: relative;

		.cBox {
			position: absolute;
			width: 100%;
			height: 90%;
			padding-left: 20px;
			padding-top: 95px;
		}
	}

	.mescroll {
		margin-bottom: 15px;
	}

	.tabsBottom {
		margin-top: 44px;
		padding-top: 10px;
		// background-color: $uni-bg-color-grey;
		padding-top: 10px;
		margin-bottom: 44px;
	}

	.nav-right-icon {
		margin-right: 30rpx;
		font-size: 16px;
		color: $u-type-primary;
	}

	.checkCls {
		width: 100%;

		uni-view:only-child {
			flex: 1;
		}
	}

	.tab-hd {
		/* #ifdef H5-DINGDING  */
		top: 0px;
		/* #endif */
		/* #ifndef H5-DINGDING  */
		top: 44px;
		/* #endif */
		width: 100%;
		position: fixed;
		z-index: 999;
	}

	.content {
		background-color: #F3F4F5;
		padding-top: 10px;
		width: 100%;
		min-height: 100%;
	}

	.cearch_title {
		background-color: #F3F4F5;
		width: 100%;
		height: 82rpx;
		font-size: 32rpx;
		font-weight: 600;
		padding: 22rpx 0 21rpx 32rpx;
		z-index: 999;
		position: fixed;
	}

	.title-content {
		width: 89%;
		margin: auto;
		padding-top: 76rpx;

		.query-btn {
			position: fixed;
			width: 95%;
			bottom: var(--window-bottom, 0);
		}
	}
</style>
